import { View, Text, Image } from '@tarojs/components'
import { cloud, navigateTo, pageScrollTo } from '@tarojs/taro'
import { useState } from 'react'
import './index.scss'
import CloudIcons from '@/assets/ImageUrlConfig'
import { useSelector } from 'react-redux'

import DrawerSpaceSetting from './components/drawer-space-setting'
import DrawerUserSetting from './components/drawer-user-setting'

export default function Setting() {
	const userStore = useSelector((state) => state.user)

	const onTapHeader = () => {
		setIsShowDrawerUserSetting(true)
	}

	const navgateToNotify = () => {
		navigateTo({
			url: '/pages/notify/index',
		})
	}

	const [currentActiveSpaceId, setCurrentActiveSpaceId] = useState('')
	const [isShowDrawerSpaceSetting, setIsShowDrawerSpaceSetting] = useState(false)
	const [isShowDrawerUserSetting, setIsShowDrawerUserSetting] = useState(false)

	const onTapSetting = (e, space) => {
		setCurrentActiveSpaceId(space._id)
		setIsShowDrawerSpaceSetting(true)
		pageScrollTo({ scrollTop: e.detail.y })
	}

	return (
		<>
			<View className='setting'>
				<View className='card'>
					<View className='header'>
						<View className='info'>
							<Image src={userStore.avatar} className='pic'></Image>
							<View className='nickname'>{userStore.nickname}</View>
						</View>
						<Image className='more' onTap={onTapHeader} src={CloudIcons.more}></Image>
					</View>
				</View>
				<View className='card' onTap={navgateToNotify}>
					<View className='notify'>
						<View className='left'>
							<View className='icon-warp'>
								<Image className='icon' src={CloudIcons.notify}></Image>
							</View>
							<Text>我的通知</Text>
						</View>
						<View className='more'>
							<Image className='img' src={CloudIcons.goTo}></Image>
						</View>
					</View>
				</View>

				<View className='card setting'>
					{userStore.space?.map((space) => {
						return (
							<View className='seeting-warp'>
								<View className='left'>
									<Text>{space.name}</Text>
								</View>
								<View
									className='more'
									onTap={(e) => {
										onTapSetting(e, space)
									}}
								>
									<Image className='img' src={CloudIcons.more}></Image>
								</View>
							</View>
						)
					})}
				</View>
				{/* <View className='card logout'>退出登录</View> */}
			</View>
			<DrawerSpaceSetting
				spaceId={currentActiveSpaceId}
				show={isShowDrawerSpaceSetting}
				setShow={setIsShowDrawerSpaceSetting}
			></DrawerSpaceSetting>

			<DrawerUserSetting show={isShowDrawerUserSetting} setShow={setIsShowDrawerUserSetting}></DrawerUserSetting>
		</>
	)
}
